<!DOCTYPE html>


<html class="fullscreen" lang="en">

  <head>

    <title>Fly By</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="assets/favicon.png">
    
    <link rel="stylesheet" type="text/css" href="index.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.151.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.151.0/examples/jsm/"
        }
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/nipplejs@0.10.1/dist/nipplejs.min.js"></script>

  </head>


  <body class="fullscreen">

    <div class="page-loader">
      <div class="loader-container">
        <div class="base">
          <span class="loader-hex-edge h6"></span>
          <span class="loader-hex-edge h3"></span>
        </div>
        <div class="base base-two">
          <span class="loader-hex-edge h1"></span>
          <span class="loader-hex-edge h4"></span>
        </div>
        <div class="base base-three">
          <span class="loader-hex-edge h5"></span>
          <span class="loader-hex-edge h2"></span>
        </div>
      </div>
    </div>

    <div class="fullscreen container">
      <canvas class="fullscreen canvas"></canvas>
    </div>

    <div id="zone-joystick" class="joystick"></div>

    <div class="hex-container hex-music">
      <img 
       id="sound"
       class="icon" 
       src="assets/icons/sound-off.svg" 
       alt="Sound On">
      <div class="hex hex-one"></div>
      <div class="hex hex-two"></div>
    </div>

    <div class="hex-container hex-info">
      <img 
       class="icon" 
       src="assets/icons/info.svg" 
       alt="Info">
      <div class="hex hex-one"></div>
      <div class="hex hex-two"></div>
    </div>

    <div class="hex-container hex-speed">
      <img
       class="icon" 
       src="assets/icons/speed.svg" 
       alt="Speed">
      <div class="hex hex-one"></div>
      <div class="hex hex-two"></div>
    </div>

    <div class="hex-container hex-birds-eye">
      <img 
       class="icon" 
       src="assets/icons/eye.svg" 
       alt="Birds Eye">
      <div class="hex hex-one"></div>
      <div class="hex hex-two"></div>
    </div>

    <div class="info-modal-page">
      <div class="info-box">
        <div class="info-close">
          <img 
           class="icon" 
           src="assets/icons/exit.svg" 
           alt="Exit Icon">
          <div class="hex hex-one"></div>
          <div class="hex hex-two"></div>
        </div>
        <h1>Fly By</h1>
        <p>
          This project started off as a procedually generated 10 by 10 tile of hexagons.
          The evolution of the Fly By experience is rather simple; 
          One feature idea at a time, never knowing what this project may become.
          <br><br>
          - Jesse
        </p>
      </div>
    </div>

    <script src="index.js" type="module"></script>

  </body>

</html>
